import { useState, useEffect } from 'react'
import { useMeta, useMailTypeOptions, useMailTemplates, useCookies } from '@/stores'
import { Collapse, Input, InputAdornment, Button, Row, Col, message, Form, Space } from 'tdesign-react'
import { VariableForm } from '@/components/Form'
import MailTopTypeFormItem from './TableConfig/MailTopTypeFormItem'
import MailSecondTypeFormItem from './TableConfig/MailSecondTypeFormItem'
import MailTemplatesFormItem from './TableConfig/MailTemplatesFormItem'
import KeepAlive from 'react-activation'
import { useTranslation } from 'react-i18next'
import { Conf as Store } from 'electron-conf/renderer'

import styles from './index.module.less'

import type { TFunction } from 'i18next'
import type { VariableFormListItemType } from '@/types/form.type'

type PropsType = {
  t: TFunction
}

const electronStore = new Store()

const Settings = (_: PropsType) => {

  const [mailTopTypeForm] = Form.useForm()
  const [mailSecondTypeForm] = Form.useForm()
  const [mailTemplatesForm] = Form.useForm()

  const {
    mailTopTypeOptions,
    mailSecondTypeOptions,
    setMailTopTypeOptions,
    setMailSecondTypeOptions
  } = useMailTypeOptions()

  const {
    mailTemplates,
    setMailTemplates
  } = useMailTemplates()

  const {
    JSYCookie,
    setJSYCookie,
  } = useCookies()

  const [JSYCookieInputValue, setJSYCookieInputValue] = useState(JSYCookie)
  const [getMailThreads, setGetMailThreads] = useState(2)

  const mailTopTypeFormList: VariableFormListItemType[] = [{
    formListName: 'mailTopType',
    formListData: mailTopTypeOptions,
    renderFormItem: ({ formFieldName, add, remove, restFields }) => <MailTopTypeFormItem
      formFieldName={formFieldName}
      addFormItem={add}
      removeFormItem={remove}
      restFields={restFields}
    />,
    renderAddFormItem: (add) => <Button onClick={add}>添加顶级类型</Button>
  }]

  console.log(mailTopTypeOptions)

  const mailSecondTypeFormList: VariableFormListItemType[] = [{
    formListName: 'mailSecondType',
    formListData: mailSecondTypeOptions,
    renderFormItem: ({ formFieldName, add, remove, restFields }) => <MailSecondTypeFormItem
      formFieldName={formFieldName}
      addFormItem={add}
      removeFormItem={remove}
      restFields={restFields}
      topTypeOptions={mailTopTypeOptions}
    />,
    renderAddFormItem: (add) => <Button onClick={add}>添加二级类型</Button>
  }]

  const mailTemplatesFormList : VariableFormListItemType[] = [{
    formListName: 'mailTemplates',
    formListData: mailTemplates,
    renderFormItem: ({ formFieldName, add, remove, restFields }) => <MailTemplatesFormItem
      formFieldName={formFieldName}
      addFormItem={add}
      removeFormItem={remove}
      restFields={restFields}
      topTypeOptions={mailTopTypeOptions}
      secondTypeOptions={mailSecondTypeOptions}
    />,
    renderAddFormItem: (add) => <Button onClick={add}>添加模板</Button>
  }]

  const saveJSYCookie = () => {
    setJSYCookie(JSYCookieInputValue)
    electronStore.set('JSYCookie', JSYCookieInputValue)
  }

  const saveMailTopType = ({ fields, firstError }) => {
    if (firstError) {
      message.warning(firstError)
      return
    }
    electronStore.set('mailTopTypeOptions', fields.mailTopType)
    setMailTopTypeOptions(fields.mailTopType || [])
  }

  const saveMailSecondType = ({ fields, firstError }) => {
    console.log(fields)
    if (firstError) {
      message.warning(firstError)
      return
    }
    electronStore.set('mailSecondTypeOptions', fields.mailSecondType)
    setMailSecondTypeOptions(fields.mailSecondType || [])
  }

  const saveMailTemplates = ({ fields, firstError }) => {
    console.log(fields)
    if (firstError) {
      message.warning(firstError)
      return
    }
    electronStore.set('mailTemplates', fields.mailTemplates)
    setMailTemplates(fields.mailTemplates || [])
  }

  return <div className={styles.Settings}>
    <div className={'content-wrapper'}>
      <Collapse defaultValue={['system', 'table']}>
        <Collapse.Panel header='系统设置' value='system'>
          <Space direction='vertical' style={{ width: '100%' }}>
            <Row gutter={[16, 16]}>
              <Col span={10}>
                <InputAdornment prepend='即时语Authorization'>
                  <Input
                    onChange={(value) => setJSYCookieInputValue(value)}
                    value={JSYCookieInputValue}
                  />
                </InputAdornment>
              </Col>
            </Row>
            <Row>
              <Col span={10}>
                <InputAdornment prepend='批量获取线程数'>
                  <Input
                    type={'number'}
                    disabled={true}
                    value={String(getMailThreads)}
                    onChange={(value) => setGetMailThreads(Number(value))}
                  />
                </InputAdornment>
              </Col>
            </Row>
            <Row>
              <Col span={10}>
                <InputAdornment prepend='跟踪单号代码'>
                  <Input
                    readonly={true}
                    value={'${trackingNo}'}
                    onChange={(value) => setGetMailThreads(Number(value))}
                  />
                </InputAdornment>
              </Col>
            </Row>
            <Row>
              <Col span={10}>
                <InputAdornment prepend='物流信息代码'>
                  <Input
                    readonly={true}
                    value={'${trackingInfo}'}
                    onChange={(value) => setGetMailThreads(Number(value))}
                  />
                </InputAdornment>
              </Col>
            </Row>
            <Row>
              <Col span={10}>
                <InputAdornment prepend='退款10%'>
                  <Input
                    readonly={true}
                    value={'${refundMoney10}'}
                    onChange={(value) => setGetMailThreads(Number(value))}
                  />
                </InputAdornment>
              </Col>
            </Row>
            <Row>
              <Col span={10}>
                <InputAdornment prepend='退款20%'>
                  <Input
                    readonly={true}
                    value={'${refundMoney20}'}
                    onChange={(value) => setGetMailThreads(Number(value))}
                  />
                </InputAdornment>
              </Col>
            </Row>
            <Row>
              <Col span={10}>
                <InputAdornment prepend='退款25%'>
                  <Input
                    readonly={true}
                    value={'${refundMoney25}'}
                    onChange={(value) => setGetMailThreads(Number(value))}
                  />
                </InputAdornment>
              </Col>
            </Row>
            <Row>
              <Col span={10}>
                <InputAdornment prepend='退款30%'>
                  <Input
                    readonly={true}
                    value={'${refundMoney30}'}
                    onChange={(value) => setGetMailThreads(Number(value))}
                  />
                </InputAdornment>
              </Col>
            </Row>
            <Row>
              <Col span={10}>
                <InputAdornment prepend='退款50%'>
                  <Input
                    readonly={true}
                    value={'${refundMoney50}'}
                    onChange={(value) => setGetMailThreads(Number(value))}
                  />
                </InputAdornment>
              </Col>
            </Row>
            <Row>
              <Col span={10}>
                <InputAdornment prepend='退款80%'>
                  <Input
                    readonly={true}
                    value={'${refundMoney80}'}
                    onChange={(value) => setGetMailThreads(Number(value))}
                  />
                </InputAdornment>
              </Col>
            </Row>
            <Row>
              <Col span={10}>
                <InputAdornment prepend='退款100%'>
                  <Input
                    readonly={true}
                    value={'${refundMoney100}'}
                    onChange={(value) => setGetMailThreads(Number(value))}
                  />
                </InputAdornment>
              </Col>
            </Row>
            <Row>
              <Col span={2}>
                <Button onClick={saveJSYCookie}>保存</Button>
              </Col>
            </Row>
          </Space>
        </Collapse.Panel>
        <Collapse.Panel header='表格设置' value='table'>
          <Collapse defaultValue={['mailTopType', 'mailSecondType']}>
            <Collapse.Panel header='顶级类型设置' value='mailTopType'>
              <VariableForm
                form={mailTopTypeForm}
                formList={mailTopTypeFormList}
                footer={<Button type='submit'>保存当前顶级类型设置</Button>}
                onSubmit={saveMailTopType}
              />
            </Collapse.Panel>
            <Collapse.Panel header='二级类型设置' value='mailSecondType'>
              <VariableForm
                form={mailSecondTypeForm}
                formList={mailSecondTypeFormList}
                footer={<Button type='submit'>保存当前二级类型设置</Button>}
                onSubmit={saveMailSecondType}
              />
            </Collapse.Panel>
          </Collapse>
        </Collapse.Panel>
        <Collapse.Panel header='模板设置' value='template'>
          <VariableForm
            form={mailTemplatesForm}
            formList={mailTemplatesFormList}
            footer={<Button type='submit'>保存当前模板设置</Button>}
            onSubmit={saveMailTemplates}
          />
        </Collapse.Panel>
      </Collapse>
    </div>
  </div>
}

const KeepAliveComponent = (props: any) => {

  const { t } = useTranslation(['home'])
  const { setMeta } = useMeta()

  useEffect(() => {
    setMeta(t('title'), 'menu-page')
  }, [])

  return <KeepAlive name='settings' key='settings'>
    <Settings
      t={t}
      {...props}
    />
  </KeepAlive>
}

export default KeepAliveComponent
